<template>
    <div>
        <van-popup v-model="popshow" position="right" :overlay="true">
            <div class="all-zone">
                <div class="all-title">
                    <div class="rec-icon" @click="closeAlltabs">
                        <svg class="icon down" aria-hidden="true">
                            <use xlink:href="#icon-arrow_left"/>
                        </svg>
                    </div>
                    <div>全部频道</div>
                </div>
                <div class="all-zone-show">
                    <div class="single rec" @click="changeTab(0)">推荐</div>
                    <div
                            class="single"
                            v-for="(item, key) in zoneList"
                            :key="key"
                            @click="changeTab(item)"
                    >{{item.name}}
                    </div>
                </div>
            </div>
            <div class="front-user-rec">
                <div class="user-id">
                    <span v-if="referInfo.referid !== '暂无'">本人ID({{referInfo.userid}})</span>
                    <span v-if="referInfo.referid === '暂无'" @click="toLogin">{{referInfo.userid}}</span>
                    <span v-if="referInfo.ouid">(原商城ID{{referInfo.ouid}})</span>
                </div>

                <div
                        class="user-rec"
                        v-if="referInfo.referid !== '暂无'"
                >通过ID({{referInfo.referid}})的推广进入商城
                </div>
                <div class="user-rec" v-if="referInfo.referid === '暂无'">暂无推广人</div>
            </div>
            <div class="user-out" @click="withdrawAccount" v-if="userInfo.uid">退出登录</div>
        </van-popup>
        <van-popup
                v-model="loginState"
                position="bottom"
                :lazy-render="false"
                :overlay="true"
                overlay-class="poppo"
        >
            <div class="pop">
                <p class="p1">您确定退出当前{{systemData.brandname}}商城{{systemData.name}}系统</p>
                <p class="p1">ID：{{userInfo.uid}}的登录状态</p>
                <div class="line"></div>
                <p class="p2" @click="loginOut">退出登录</p>
                <div class="line-5"></div>
                <p class="p2" @click="hideWithdraw">取消</p>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {commonMixin, frontMixin, sysMixin} from '@/common/mixin';
    import {Toast} from 'vant';
    import API from '../../request/api';

    export default {
        name: 'top-pop',
        mixins: [commonMixin, frontMixin, sysMixin],
        props: {
            show: {
                type: Boolean
            },
            zoneList: {
                type: Array
            }
        },
        data() {
            return {
                popshow: this.show,
                loginState: false
            };
        },
        computed: {
            referInfo() {
                let referInfo = {};
                let userInfo = this.$store.state.login.userInfo;
                if (this.isLogin) {
                    referInfo.referid = userInfo.referrer;
                    referInfo.refername = userInfo.referrername;
                    referInfo.userid = userInfo.uid;
                    if (userInfo.ouid != 0) {
                        referInfo.ouid = userInfo.ouid;
                    }
                } else {
                    if (this.$store.state.login.refer.referid) {
                        referInfo = this.$store.state.login.refer;
                    } else {
                        referInfo.referid = '暂无';
                    }
                    referInfo.userid = '请登录';
                }
                return referInfo;
            },
            isLogin() {
                let userInfo = this.$store.state.login.userInfo;
                // console.log('loginlogin:', JSON.stringify(userInfo), userInfo.role);
                let login = false;
                if (JSON.stringify(userInfo) != '{}') {
                    login = userInfo.role === undefined ? false : true;
                }
                return login;
            }
        },
        created() {
            this.popshow = this.show;
            //    获取userinfo
            this.request.get(API.islogin).then(res => {
                if (res.islogin == 1) {
                    this.request
                        .get(API.getUserInfo)
                        .then(
                            res1 => {
                                this.$store.commit('setUserInfo', res1);
                            }
                        )
                        .catch(err => {
                            this.$toast.fail(err);
                        });
                }
            });

        },
        methods: {
            closeAlltabs() {
                this.popshow = false;
                this.$emit('changeShow', false);
            },
            changeTab(item) {
                this.closeAlltabs();
                this.$emit('changeTab', item);
            },
            loginOut() {
                //    退出登录
                this.$store.commit('setToken', ''); // 把本地token删掉就行
                this.$store.commit('setTokenType', '');
                this.$store.commit('setUserInfo', ''); // 把本地用户信息删掉就行
                this.$store.commit('refer', ''); // 把本地推荐人信息清掉
                //  更新tokenArray（删除对应的token）
                let tokenArray = JSON.parse(localStorage.getItem('tokenArray'));
                let system = this.$store.state.login.system;
                if (tokenArray) {
                    delete tokenArray[system];
                    this.$store.commit('setTokenArray', tokenArray);
                }
                this.hideWithdraw2();
                this.$router.push({
                    name: 'welcome',
                    query: {
                        system: system
                    }
                });
            },
            hideWithdraw2() {
                //    隐藏
                this.loginState = false;
                Toast('您已退出登录');
                this.$router.push('front');
            },
            hideWithdraw() {
                //    隐藏
                this.loginState = false;
            },
            withdrawAccount() {
                //    退出账号
                this.loginState = true;
            },
            toLogin() {
                this.$router.push({
                    name: 'login'
                });
            }
        },
        watch: {
            show(newValue) {
                this.popshow = newValue;
            }
        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    >>> .van-popup--right {
        height: 100%;
        box-sizing: border-box;
        background: #F5F5F5;
    }

    .pop {
        flex-y(flex-start, center);
        padding-top: 3vw;

        .p1 {
            word-vw(word12, gray9);
            line-height: vw(20);
        }

        .p2 {
            word-vw(word14, main-color);
            line-height: vw(48);
        }
    }

    .all-zone {
        padding: vw(10) cellPadding;
        max-height: 50%;
        overflow-y: scroll;
        background: grayF;
        /* border 1px violet solid */
    }

    .all-title {
        width: calc(100% - 30px);
        height: vw(39);
        position: fixed;
        top: 0;
        left: 0;
        flex-x(flex-start);
        background: grayF;
        padding: 0 cellPadding;
        overflow: hidden;

        .icon {
            margin-right: vw(10);
        }
    }

    .all-zone-show {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: vw(10);

        .single {
            word-vw(word14, gray9);
            margin-top: middleMargin;
            margin-right: smallMargin;
            padding: vw(6) vw(15);
            border: vw(1) solid gray9;
            border-radius: all-radius;
        }

        .rec {
            color: main-color;
            border: vw(1) solid main-color;
        }
    }

    .front-user-rec {
        width: vw(345);
        height: vw(88);
        box-sizing: border-box;
        background-color: grayF;
        padding: 0 cellPadding;
        word-vw(word14, gray3);
        margin: auto;
        margin-top: vw(50);
        flex-y(center);

        .user-id {
            line-height: vw(19);
            flex-wrap: wrap;
            ellipsis();
        }

        .user-rec {
            padding-right: cellPadding;
            line-height: vw(16);
            word-vw(word12, gray3);
            margin-top: smallMargin;
            display: flex;
            flex-direction: row;
        }
    }

    .user-out {
        margin-top: vw(20);
        margin-left: 32%;
        width: vw(120);
        height: vw(35);
        color: main-color;
        border: vw(1) solid main-color;
        font-size: word14;
        text-align: center;
        border-radius: vw(30);
        line-height: vw(35);
    }
</style>
